<template>
  <view class="refund-wrapper" v-if="vdata.list.length > 0">
    <view class="refund-title">退款记录</view>
    <!-- 列表循环部分 start border-none 去掉边框类名 -->
	<block v-for="(item, i) in vdata.list" :key="i">
		<view class="refund-item border-none" >
		  <view class="refund-money">
			<view>退：￥{{cal.cert2Dollar(item.refundAmount)}}</view>
			<view>余：￥{{ calSubAmount(i) }}</view>
		  </view>
		  <view class="refund-time"> {{ item.createdAt }} </view>
		</view>
	</block>
    <!-- 列表循环部分end -->
    <view v-if="props.refundBtn" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="emits('refund')">发起退款</view>
  </view>
</template>

<script setup>

import { reactive, ref } from 'vue'
import { reqLoad, API_URL_REFUND_LIST } from '@/http/apiManager.js'
import { onPageScroll, onLoad } from '@dcloudio/uni-app'
import cal from '@/commons/utils/cal.js'
import datamap from '@/commons/utils/datamap.js'
import infoBox from '@/commons/utils/infoBox.js'
import ent from '@/commons/utils/ent.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'

const props = defineProps({
  refundBtn: { type: Boolean, default: false },
  orderInfo: { type: Object, default: () => { return { } } },
  
})

const vdata = reactive({
	list: []
})

// 刷新列表 
function refList(payOrderId){
	reqLoad.list(API_URL_REFUND_LIST, { payOrderId: payOrderId, state: 2, pageSize: -1 }).then(({bizData}) => {
		vdata.list = bizData.records
		emits("refRefundCountFunc", bizData.total)
	})
}

function calSubAmount(index){
	
	let allRefundAmount = 0
	
	for (var i = index; i < vdata.list.length; i++) {
		allRefundAmount += vdata.list[i].refundAmount
	}
	
	return cal.cert2Dollar(props.orderInfo.amount - allRefundAmount)
	
}

	
const emits = defineEmits(['refund', 'refRefundCountFunc'])

defineExpose({ refList })
</script>

<style lang="scss" scoped>
.refund-wrapper {
  padding: 0 75rpx;
  padding-bottom: 70rpx;
  box-sizing: border-box;
  .refund-title {
    margin: 70rpx 0 30rpx 0;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
  }
  .refund-item {
    height: 160rpx;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

    .refund-money {
      display: flex;
      justify-content: space-between;
      margin: 30rpx 0 20rpx 0;
      color: #fff;
      font-size: 30rpx;
      font-weight: 400;
    }
    .refund-time {
      margin-bottom: 30rpx;
      color: rgba(255, 255, 255, 0.65);
      font-size: 30rpx;
      font-weight: 400;
    }
  }
  .border-none {
    border: none;
  }
  .refund-button {
    margin-top: 70rpx;
    height: 110rpx;
    font-size: 33rpx;
    font-weight: 500;
    color: #ff5b4c;
    background-color: $J-bg-ff;
    border-radius: $v-b-r20;
  }
  .touch-button {
    opacity: 0.5;
  }
}
</style>
